<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="<%=basePath%>js/initPage.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>随便打TCS系统</title>

    <!-- Bootstrap -->
    <link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <!-- Font Awesome -->
    <link
            href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            rel="stylesheet">
    <!-- NProgress -->
    <link href="<%=basePath%>vendors/nprogress/nprogress.css"
          rel="stylesheet">
    <!-- iCheck -->
    <link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
          rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link
            href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
            rel="stylesheet">
    <!-- JQVMap -->
    <link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
          rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link
            href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
            rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">
    <style>
        .Viewtd {
            position: relative;
        }

        .ViewOrder {
            position: absolute;
            top: -15px;
            right: 218px;
            width: 300px;
            border: 1px solid #E6E9ED;
            background-color: #fff;
            text-align: center;
            font-size: 12px;
        }

        .ViewOrder .title {
            text-align: center;
            margin-top: 5px;
            border-bottom: 2px solid #E6E9ED;
        }

        .ClassifyChild {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0 .5rem 1rem .5rem;
        }

        .order_input {
            border: 0;
            border-bottom: 1px solid #E6E9ED;
            text-align: center;
            margin-bottom: 10px;
        }

        .ViewOrder i {
            color: #ddd;
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 16px;
        }

        /*三角标*/
        .triangle:before {
            content: '';
            border-left: 10px solid #E6E9ED;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 0;
            position: absolute;
            right: -1px;
            top: 31%;
            margin-right: -10px;
            margin-top: -10px;
        }

        .triangle:after {
            content: '';
            border-left: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 0;
            position: absolute;
            right: -1px;
            top: 31%;
            margin-right: -9px;
            margin-top: -10px;
        }
    </style>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">

                <div class="clearfix"></div>

                <br/>

            </div>
        </div>

        <!-- page content -->
        <div class="right_col" role="main">
            <div class="">
                <div class="page-title">
                    <div class="title_left"></div>

                    <div class="x_content">
                        <select class="btn btn-default dropdown-toggle" id="status" style="text-align: center;">
                            <option value="4" <c:if test="${status == 4}">selected</c:if>> 全部</option>
                            <option value="0" <c:if test="${status == 0}">selected</c:if>>提现失败</option>
                            <option value="1" <c:if test="${status == 1}">selected</c:if>>提现审核中</option>
                            <option value="2" <c:if test="${status == 2}">selected</c:if>>提现成功</option>
                        </select>
                        店铺名: <input type="text" name="shopname" id="shopname"
                                    value="${shopname}"/>
                        真实姓名: <input type="text" name="name" id="name"
                                     value="${name}"/>
                        到账账号: <input type="text" name="accountnum" id="accountnum"
                                     value="${accountnum}"/>
                        <button type="submit" class="btn btn-default"
                                onclick="selectOEM(1)">搜索
                        </button>
                        <c:if test='${adminUsergrade == 2}'>
                            <button type="submit" class="btn btn-default"
                                    onclick="addWithdrawals()">申请提现
                            </button>
                        </c:if>
                    </div>
                </div>

                <div class="x_panel">

                    <div class="x_content">

                        <table id="datatable" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>店铺名</th>
                                <th>真实姓名</th>
                                <th>手机号码</th>
                                <th>申请日期</th>
                                <th>提现方式</th>
                                <th>提现金额</th>
                                <th>到账账号</th>
                                <th>提现进度</th>
                                <th>提现操作</th>
                                <th>理由</th>
                            </tr>
                            </thead>

                            <tbody>
                            <c:forEach items="${selfShopWithdrawals}" var="s" varStatus="z">
                                <tr>
                                    <td>${s.selfShop.shopname}</td>
                                    <td>${s.name}</td>
                                    <td>${s.mobile}</td>
                                    <td><fmt:formatDate value="${s.createtime}" type="date"
                                                        pattern="yyyy-MM-dd"/></td>
                                    <td><c:if test="${s.type == 1}">支付宝</c:if></td>
                                    <td>${s.cash}</td>
                                    <td>${s.accountnum}</td>
                                    <td><c:if test="${s.status == 0}">提现失败</c:if>
                                        <c:if test="${s.status == 1}">提现审核中</c:if>
                                        <c:if test="${s.status == 2}">提现完成</c:if></td>
                                    <td>
                                        <div class="input-group-btn">
                                            <c:if test='${adminUsergrade == 1}'>
                                                <button type="button"
                                                        class="btn btn-default dropdown-toggle"
                                                        data-toggle="dropdown" aria-expanded="false">
                                                    提现审核 <span class="caret"></span>
                                                </button>
                                                <div class="ViewOrder triangle" style="display:none">
                                                    <div class="tooltip-arrow"></div>
                                                    <p class="title">失败理由</p>
                                                    <i class="fa fa-close" id="Classifyclose"></i>
                                                    <!-- 分类项 -->
                                                    <div class="ClassifyChild" style="margin-top:0">
                                                        <input class="order_input" type="text" placeholder="请填写失败理由"
                                                               id="remark${z.index + 1}" value="${s.remark}">
                                                        <p>
                                                            <input type="submit" class="btn btn-success"
                                                                   onclick="upStatus('${s.id}','0','1','${z.index + 1}')"
                                                                   value="提交"/>
                                                        </p>
                                                    </div>
                                                </div>
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                    <li class="status"><a href="javascript:" type="submit">提现失败</a>
                                                    </li>
                                                    <li><a href="javascript:" type="submit"
                                                           onclick="upStatus('${s.id}','2','3')">提现完成</a></li>
                                                </ul>
                                            </c:if>
                                            <c:if test='${s.status == 1}'>
                                                <c:if test='${adminUsergrade == 2}'>
                                                    <button type="button"
                                                            class="btn btn-default dropdown-toggle"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                        是否取消 <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                        <li><a href="javascript:" type="submit"
                                                               onclick="upStatus('${s.id}','0','0')">取消提现</a></li>
                                                    </ul>
                                                </c:if></c:if>
                                            <c:if test='${s.status == 0}'>
                                                <c:if test='${adminUsergrade == 2}'>
                                                    <button type="button"
                                                            class="btn btn-default dropdown-toggle"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                        重新提交 <span class="caret"></span>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                        <li><a href="javascript:" type="submit"
                                                               onclick="upStatus('${s.id}','1','2')">提交</a></li>
                                                    </ul>
                                                </c:if></c:if>
                                            <c:if test='${s.status == 2}'>
                                                <c:if test='${adminUsergrade == 2}'>
                                                    <button type="button"
                                                            class="btn btn-default dropdown-toggle"
                                                            data-toggle="dropdown" aria-expanded="false">
                                                        不可操作 <span class="caret"></span>
                                                    </button>
                                                </c:if></c:if>
                                        </div>
                                    </td>
                                    <td>${s.remark}</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="clearfix"></div>
                <br/>
            </div>
            <div style="width: 100%; text-align: center;">
                <div id='page'></div>
            </div>
        </div>
        <!-- /page content -->


        <script>
            /**
             * 纯粹的JS分页插件，代码缺点：JS操作DOM冗余太多，太繁琐
             */
            pageUtil.initPage('page', {
                totalCount: '${totlenum}', //总页数，一般从回调函数中获取。如果没有数据则默认为1页
                curPage: '${curPage}', //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
                showCount: 9, //分页栏显示的数量
                pageSizeList: [10], //自定义分页数，默认[5,10,15,20,50]
                defaultPageSize: 10, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
                isJump: true, //是否包含跳转功能，默认false
                isPageNum: true, //是否显示分页下拉选择，默认false
                isPN: true, //是否显示上一页和下一面，默认true
                isFL: true, //是否显示首页和末页，默认true
                jump: function (curPage, pageSize) { //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
                    selectOEM(curPage);
                },
            });
        </script>

    </div>
</div>

<script type="text/javascript">
    function selectOEM(curPage) {
        var shopname = $("#shopname").val();
        var name = $("#name").val();
        var accountnum = $("#accountnum").val();
        var status = $("#status").find("option:selected").val();
        location.href = "selectSelfWithdrawals?curPage=" + curPage +
            "&shopname=" + shopname +
            "&name=" + name +
            "&accountnum=" + accountnum +
            "&status=" + status;
    }

    function addWithdrawals() {
        location.href = "addSelfShopWithdrawals";
    }

    // ajax 对象
    function ajaxObject() {
        var xmlHttp;
        try {
            // Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("您的浏览器不支持AJAX！");
                    return false;
                }
            }
        }
        return xmlHttp;
    }

    function upStatus(id, status, choose, no) {
        var remark = "";
        if (choose == 0) {
            remark = "商铺取消提现申请";
        }
        if (choose == 1) {
            remark = $("#remark"+no+"").val();
        }
        if (choose == 2) {
            remark = "商铺重新提交";
        }
        if (choose == 3) {
            remark = "";
        }
        var ajax = ajaxObject();
        ajax.open("post", "updateSelfShopWithdrawals?remark=" + remark +
            "&id=" + id +
            "&status=" + status, false);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var result = ajax.responseText;
                    if (result == "success") {
                        //请求成功
                        alert("审核完成");
                        selectOEM(${curPage});
                    } else {
                        //创建失败
                        alert(result);
                    }
                } else if (ajax.status == 0) {
                    //请求失败
                    alert("您使用的火狐浏览器不支持本次操作，请更换浏览器重试");
                } else {
                    //请求失败
                    alert("请求终止，请检查操作或联系客服咨询" + ajax.status);
                }
            } else {
            }
        };
        ajax.send();

    }
</script>
<!-- jQuery -->
<script src="<%=basePath%>vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="<%=basePath%>vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="<%=basePath%>vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="<%=basePath%>vendors/nprogress/nprogress.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
<script
        src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Chart.js -->
<script src="<%=basePath%>vendors/Chart.js/dist/Chart.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="<%=basePath%>build/js/custom.min.js"></script>
<!-- layui -->
<script src="<%=basePath%>vendors/layui/layui.js"></script>
<script>
    //点击图片弹出二级
    $(".status").on("click", function () {
        /* 判断是否处于隐藏态 */
        console.log("点击");
        $(this).parents("tr").siblings("tr").find(".ViewOrder").slideUp(100);
        if ($(this).parent().siblings('.ViewOrder').css("display") == "none") {
            $(this).parent().siblings('.ViewOrder').slideDown(400);
        } else {
            $(this).parent().siblings('.ViewOrder').slideUp(400);
        }
    });
    //二级菜单关闭按钮
    $(".ViewOrder>i").on("click", function () {
        console.log("关闭");
        $(this).parent().slideUp(300)
        /* $(this).parent().attr("style","display:none") */
    });
</script>
</body>
</html>